<template>

   <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm"  class="demo-ruleForm">叩丁狼商品管理系统
  <el-form-item prop="username">
    <el-input type="text" placeholder="账号" v-model="ruleForm.username" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item prop="pwd">
    <el-input type="password" placeholder="密码" v-model="ruleForm.pwd" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" style="width:100%" @click="submitForm('ruleForm')">登录</el-button>
    
  </el-form-item>
</el-form>

 
</template>

<script>
import {LoginApi} from '../../request/api'
import {SETMENU} from '@/store/mutations'
export default {
    data () {
        return {
        ruleForm:{},
        rules:{
          username:[
            {required:true,message:"账号不能为空",trigger:"blur"},
            {validator:this.valiName,trigger:'blur'}
          ],
          pwd:[
            {required:true,message:"密码不能为空!",trigger:"blur"}
          ]
        }
 
        }
    },
    methods:{
      valiName(rule,value,cb){
        if(value.length<3||value.length>20){
             cb("请输入3-20位的数字")
        }else{
          cb()
        }
      },
      //登录按钮
      submitForm(form){
         this.$refs[form].validate((vali)=>{
           console.log(vali);
           if(vali){
            //  console.log(111);
             LoginApi({
              username:this.ruleForm.username,
              password:this.ruleForm.pwd
             })
             .then((res)=>{
               if(res.errno===0){
               localStorage.setItem('token',res.data.token);
               this.$store.commit(SETMENU,res.data.menu)
               //跳转
               this.$router.push('/',(complate)=>{
              
               },(err)=>{})
               }
             })
             .catch((err)=>{
               console.log(err);
             })
           }
         })
      }
    }
}
</script>
 
<style lang = "less" scoped>


.demo-ruleForm{
     width: 330px;
    position: fixed;
    left: 50%;
     top: 50%;
  transform: translate(-50%,-50%);
  font-size: 20px;
  text-align: center;
  
    }

    
</style>